<template>
  <div id="views">
<!--    <div class="container">-->
      <p class="title">
        <span>充值天数</span>
        <span>充值日期</span>
        <span>充值金额</span>
      </p>
      <section class="list">
        <p v-for="(item , index) in list">
          <span>{{item.num}}天</span>
          <span>{{item.time_create}}</span>
          <span>
            <span v-if="item.currency_code === 'CNY' || item.currency_code === 'BTC'">￥</span>

            <span v-if="item.currency_code === 'BTC'">{{item.amount_cny}}</span>
            <span v-if="item.currency_code != 'BTC'">{{item.amount}}</span>

            <span v-if="item.currency_code === 'USDT'">usdt</span>
<!--            <span v-if="item.currency_code === 'BTC'">BTC</span>-->
            <span class="ab" v-if="item.currency_code == 'BTC'">{{item.amount}}BTC 抵扣</span>
          </span>
        </p>
      </section>
      <div class="loadBox">
        <span class="loadinfo">{{loadinfo}}</span>
      </div>
<!--    </div>-->
  </div>
</template>
<script>
  import { addElectricDetail } from '../../http/api'
  export default {
    name: 'no_electric_recharge_detail',
    data(){
      return{
        introduce : '不包电 ，电费充值列表',
        list : [],
        loadinfo:'加载中...',
        // page : 0,
        // totalPage : 1,
      }
    },
    // methods:{
    //   loadlist(){
    //
    //   },
    // },
    mounted() {
      let query = this.$route.query;
      let thiz = this;
      addElectricDetail( { order_id : query.order_id}).then(res => {
        if(res.code == 200 ){
          let list = res.data.list;
          for( var i = 0 ; i < list.length ; i++){
            var cur = list[i];
            let sliceNum;
            switch (cur.currency_code){
              case 'BTC' :
                sliceNum = 8;
                break;
              case 'USDT' :
                sliceNum = 4;
                break;
              default :
                sliceNum = 2;
            }
            cur.amount = thiz.sliceNum(cur.amount , sliceNum );
          }
          thiz.list = list;
          thiz.loadinfo = '到底了...';
        }
      })
    }
  }
</script>
<style type="text/less" lang="less" scoped>
  #views{
    background: #fff;
  }
  .width100 {
    width: 100%;
  }

  .container {
    min-height: 100%;
    background: #fff;
    color: #262626;
  }

  .textCenter {
    text-align: center
  }

  img {
    font-size: 0;
  }

  .title {
    background: #F8F8F8;
    padding: 0.2rem 0.29rem;
    display: block;
    overflow: hidden;
    font-size: 0.22rem;
    color: #999999;
  }
  .ab{
    position: absolute;bottom: -100%;display: inline-block;width: 100%;left: 0;font-size: 0.2rem;
  }
  .title>span {
    display: block;
    float: left;
  }

  .title>span:first-child,
  .list>p>span:first-child {
    width: 25%;
  }

  .title>span:last-child,
  .list>p>span:last-child {
    width: 35%;
    text-align: right;
  }

  .title>span:nth-child(2),
  .list>p>span:nth-child(2) {
    width: 40%;
    text-align: left;
  }

  .list {
    padding: 0 0.3rem;
  }

  .list>p {
    font-size: 0.26rem;
    padding: 0.3rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 0.015rem solid #F5F6F8;
    overflow: hidden;
  }

  .list>p>span {
    display: block;
    float: left;
    line-height: 100%;
    position: relative;
  }

  .list>p>span:last-child {
    color: #F15342;
  }

  .loadBox {
    padding: 0.1rem 0;
    text-align: center;
    overflow: hidden;
    background: none;
  }

  .loadinfo {
    text-align: center;
    color: #595959;
    font-size: 0.22rem;
    padding: 0.14rem 0.25rem;
    border-radius: 0.06rem;
    display: inline-block;
  }
</style>
